<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @on-load="onLoad"
      v-if="showMain"
    >
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.jxgy_delete"
          @click="handleDelete"
        >删 除
        </el-button>
        <!--        <el-button type="primary" size="small" @click="showView">任务列表</el-button>-->
        <UploadStyle
          ref="uploadStyle"
          v-if="screenShotDialogVisible"
          :visible="screenShotDialogVisible"
          :img-url="imgUrl"
          :proportion="proportion"
          @closeDialog="closeDialog"
          @getImgURL="getImgURL"
        />
      </template>
      <template slot-scope="{ type, size, row, index }" slot="menuBtn">
        <el-dropdown-item divided @click.native="showView(row)"
        >任务列表
        </el-dropdown-item
        >
      </template>
    </avue-crud>
    <MsktList
      v-bind:csId="csId"
      :showMainView="showMainView"
      v-if="!showMain && show1"
      ref="eps1"
    ></MsktList>
  </basic-container>
</template>

<script>
import {getList, add, update, remove} from "@/api/service/mskt";
import MsktList from "@/views/service/msktList.vue";
import {mapGetters} from "vuex";

export default {
  components: {
    MsktList,
  },
  data() {
    return {
      screenShotDialogVisible: false,
      imgUrl: "",
      _done: null,
      proportion: [166,108],// 宽高的像素数组
      _uploadLoading: null,
      showMain: true,
      show1: false,
      show2: false,
      csId: '',
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height: 'auto',
        calcHeight: 210,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        menuType: 'menu',
        menuBtnTitle: '更多操作',
        column: [
          {
            label: "主键",
            prop: "id",
            rules: [{
              required: true,
              message: "请输入主键",
              trigger: "blur"
            }],
            hide: true,
            display: false
          },
          {
            label: "学校名称",
            prop: "school_id",
            type: "tree",
            search: false,
            overHidden: true,
            cascader: ['js_id', 'kc_xkid'],
            rules: [{
              required: true,
              message: "请选择学校",
              trigger: "blur"
            }],
            dicUrl: "/api/PcPublicService/GetSchoolTreeSelect",
            props: {
              label: "xxName",
              value: "id"
            },
          },
          {
            label: "所属阶段",
            prop: "jd_id",
            search: false,
            rules: [{
              required: true,
              message: "请选择所属阶段",
              trigger: "blur"
            }],
            hide: true,
            type: "select",
            dicUrl: "/api/ManageClassRoom/GetSchoolStageSelect",
            cascader: ['nj_id'],
            props: {
              label: "title",
              value: "id"
            },
          },
          {
            label: "年级",
            prop: "nj_name",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            rules: [{
              required: true,
              message: "请输入年级",
              trigger: "blur"
            }],
          },
          {
            label: "年级",
            prop: "nj_id",
            type: "select",
            // search: true,
            hide: true,
            overHidden: true,
            rules: [{
              required: true,
              message: "请输入年级名称",
              trigger: "blur"
            }],
            dicUrl: "/api/ManageClassRoom/GetGradeSetSelect?jd_Id={{key}}",
            props: {
              label: "title",
              value: "id"
            },
          },
          {
            label: "教师姓名",
            prop: "js_name",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            rules: [{
              required: true,
              message: "请输入学期",
              trigger: "blur"
            }],

          },
          {
            label: "教师姓名",
            prop: "js_id",
            // search: true,
            hide: true,
            overHidden: true,
            rules: [{
              required: true,
              message: "请选择教师姓名",
              trigger: "blur"
            }],
            type: 'select',
            dicUrl: "/api/PcPublicService/GetTeacherSelect?schoolId={{key}}",
            props: {
              label: "jsName",
              value: "id"
            },
            // dataType: "string",
          },
          {
            label: "教师描述",
            prop: "js_desc",
            // search:true,
            hide: true,
            overHidden: true,
            rules: [{
              required: true,
              message: "请输入教师描述",
              trigger: "blur"
            }],
            maxlength: 200,
            showWordLimit: true
          },
          {
            label: "学科名称",
            prop: "kc_xkname",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            rules: [{
              required: true,
              message: "请输入年级",
              trigger: "blur"
            }],
          },
          {
            label: "学科名称",
            prop: "kc_xkid",
            overHidden: true,
            hide: true,
            rules: [{
              required: true,
              message: "请选择学科名称",
              trigger: "blur"
            }],
            type: "select",
            dicUrl: "/api/PcPublicService/GetCourseSelect?schoolId={{key}}",
            props: {
              label: "kcName",
              value: "id"
            },
            // dataType: "string",
          },
          {
            label: "课程名称",
            prop: "kc_name",
            // search:true,
            overHidden: true,
            rules: [{
              required: true,
              message: "请输入课程名称",
              trigger: "blur"
            }],
            maxlength: 200,
            showWordLimit: true
          },
          {
            label: "课程描述",
            prop: "kc_desc",
            // search:true,
            hide: true,
            overHidden: true,
            rules: [{
              required: true,
              message: "请输入课程描述",
              trigger: "blur"
            }],
            maxlength: 200,
            showWordLimit: true
          },
          {
            label: "课程封面",
            prop: "kc_pic",
            rules: [{
              required: true,
              message: "请选择课程封面",
              trigger: "blur"
            }],
            type: 'upload',
            loadText: '附件上传中，请稍等',
            limit: 1,
            listType: 'picture-img',
            span: 24,
            accept: "image/*",
            propsHttp: {
              url: 'link',
              name: 'name',
              res: 'data'
            },
            action: '/api/localfiles/uploadPcFile',
            tip: '只能上传jpg/png文件，且不超过500kb',
            hide: true,
            uploadBefore: (file, done, loading, col) => {
              this.screenShotDialogVisible = true
              const fileReader = new FileReader()
              fileReader.onload = (res) => {
                // 给图片裁切传递参数
                this.imgUrl = res.target.result
              }
              fileReader.readAsDataURL(file)
              // 备份
              this._done = done
              this._uploadLoading = loading
              this.proportion = [166,108]
            }
          },

          //   {
          //     label: "课程难度",
          //     prop: "kc_nd",
          //     overHidden: true,
          //     rules: [{
          //       required: true,
          //       message: "请选择课程难度",
          //       trigger: "blur"
          //     }],
          //     type: "select",
          //     dicData: [
          //       {
          //         label: "1",
          //         value: 1
          //       },
          //       {
          //         label: "2",
          //         value: 2
          //       },
          //       {
          //         label: "3",
          //         value: 3
          //       },
          //       {
          //         label: "4",
          //         value: 4
          //       },
          //       {
          //         label: "5",
          //         value: 5
          //       },
          //     ],
          //     dataType: "string",
          //   },
          //   {
          //     label: "上课时间",
          //     prop: "kc_time",
          //     // search:true,
          //     overHidden: true,
          //     rules: [{
          //       required: true,
          //       message: "请输入上课时间",
          //       trigger: "blur"
          //     }],
          //     maxlength: 200,
          //     showWordLimit: true
          //   },
          //   {
          //     label: "开始时间",
          //     prop: "kc_start",
          //     type: "datetime",
          //     format: "yyyy-MM-dd HH:mm:ss",
          //     valueFormat: "yyyy-MM-dd HH:mm:ss",
          //     overHidden: true,
          //     rules: [{
          //       required: true,
          //       message: "请选择开始时间",
          //       trigger: "blur"
          //     }]
          //   },
          //   {
          //     label: "结束时间",
          //     prop: "kc_end",
          //     type: "datetime",
          //     format: "yyyy-MM-dd HH:mm:ss",
          //     valueFormat: "yyyy-MM-dd HH:mm:ss",
          //     overHidden: true,
          //     rules: [{
          //       required: true,
          //       message: "请选择结束时间",
          //       trigger: "blur"
          //     }]
          //   },
          //   {
          //     label: "课程标签",
          //     prop: "kc_tags",
          //     search: true,
          //     rules: [{
          //       required: true,
          //       message: "请选择课程标签",
          //       trigger: "blur"
          //     }],
          //     type: 'select',
          //     dicUrl: "/c_api/ManageClassRoom/GeClassRoomcTag",
          //     props: {
          //       label: "name",
          //       value: "id"
          //     },
          //     dataType: "string",
          //   },


          {
            label: '学年',
            prop: 'kc_xn',
            overHidden: true,
            rules: [{
              required: true,
              message: "请选择学年",
              trigger: "blur"
            }],
            type: "select",
            dicUrl: "/api/ManageClassRoom/GetClassRoomDict?type=0",
            props: {
              label: "name",
              value: "id"
            },
            dataType: "string"
          },
          {
            label: '学期',
            prop: 'kc_xq',
            overHidden: true,
            rules: [{
              required: true,
              message: "请选择学期",
              trigger: "blur"
            }],
            type: "select",
            dicUrl: "/api/ManageClassRoom/GetClassRoomDict?type=1",
            props: {
              label: "name",
              value: "id"
            },
            dataType: "string"
          },
          {
            label: '周次',
            prop: 'kc_zh',
            overHidden: true,
            rules: [{
              required: true,
              message: "请选择周次",
              trigger: "blur"
            }],
            type: "select",
            dicUrl: "/api/ManageClassRoom/GetClassRoomDict?type=2",
            props: {
              label: "name",
              value: "id"
            },
            dataType: "string"
          },
          {
            label: "发布时间",
            prop: "kc_issuetime",
            hide: true,
            type: "datetime",
            format: "yyyy-MM-dd HH:mm",
            valueFormat: "yyyy-MM-dd HH:mm",
            overHidden: true,
            rules: [{
              required: true,
              message: "请选择发布时间",
              trigger: "blur"
            }]
          },
          {
            label: "平台课程",
            prop: "is_platform",
            type: 'switch',
            value: true,
            dicData: [{
              label: '否',
              value: false
            }, {
              label: '是',
              value: true
            }],
            hide: true,
            overHidden: true,
            rules: [{
              required: true,
              message: "请选择平台课程",
              trigger: "blur"
            }],
          },

        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["permission", "JSuserInfo"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.jxgy_add, false),
        viewBtn: this.vaildData(this.permission.jxgy_view, false),
        delBtn: this.vaildData(this.permission.jxgy_delete, false),
        editBtn: this.vaildData(this.permission.jxgy_edit, false)
      };
    },
    schoolId() {
      return this.JSuserInfo.schoolId
    },
    jsId() {
      return this.JSuserInfo.js_Id
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  methods: {
    showMainView() {
      this.showMain = true;
      this.show1 = false;
      this.show2 = false;
    },
    rowSave(row, done, loading) {
      row.id = row.id === '' ? '0' : row.id
      // row.tenant_id = '' //租户 id
      row.update_user = '0' //修改人 id
      row.create_user = '0' //创建人id
      add(row).then(() => {
        done();
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    rowUpdate(row, index, done, loading) {
      row.create_dept = '0'
      update(row).then(() => {
        done();
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove({ids: row.id});
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove({ids: this.ids});
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        // getDetail(this.form.id).then(res => {
        //   this.form = res.data.data;
        // });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    onLoad(page, params = {}) {
      this.loading = true;
      // params.SchoolId = this.schoolId
      // params.tenant_id = ''
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.totalItems;
        this.data = data.items;
        this.loading = false;
        this.selectionClear();
      });

      // const school = this.findObject(this.option.column, "schoolId");
      // school.hide = true;
    },
    showView(row) {
      this.csId = row.id;
      //this.$refs.eps.onLoad({currentPage:1,pageSize:10});
      this.showMain = false;
      this.show1 = true;
    },
    closeDialog(val){
      if(this._uploadLoading !== null){
        this._uploadLoading();
        this._uploadLoading = null
      }
      this.screenShotDialogVisible = val;
    },
    getImgURL(data){
      if(this._done !== null){
        this._done(data);
        this._done = null
      }
      this.closeDialog(false)
    }
  }
};
</script>

<style>
</style>
